<template>
    <div class="panel_wrapbk">
          <div class="panel_title">
              <span class="title_text"></span>
        <div v-if="tabArr&&tabArr.length > 0" class="panel_tab">
                          <span v-for="item in tabArr" :key="item.index" :class="[activeTab == item.index ? 'active':'','tab_item',item.index < tabArr.length-1 ? 'hasLine' : '' ]" @click="checkGcTab(item.index)">{{item.label}}</span>
              </div>
        <!-- <span v-if="topInfo" class="show_info">{{showInfo}}</span> -->
          </div>
          <div class="panel_main" :style="{height:contentHeight}">
              <slot />
          </div>
      </div>
  </template>
  
  <script>
  export default {
     data(){
      return {
        tabArr:[],
        activeTab:0,
        topInfo:'',
        titleBgImg:''
      }
     },
     props:{
      tabs:Array,//标题上的tab
      showInfo:String,//标题上的信息
      width:String,//宽度
      height:Number,//高度
     },
     mounted(){
      this.tabArr = this.tabs;
      this.topInfo = this.showInfo;
     },
     computed:{
          //计算内容区域高度
          contentHeight(){
              return (+this.height - 10) + 'px';//总高度 - 标题高度 - 标题和内容区域的间距
          }
     },
     methods:{
      checkGcTab(val){
        this.activeTab = val;
      }
     }
  }
  </script>
  
  <style lang="less">
   .panel_wrapbk {
          width: 100%;
          box-sizing: border-box;
          margin-top:15px;
          padding-right: 15px;
          .panel_main{
            width: 100%;
            .chart{
              height: 100%;
              width:100%;
            }
          }
          .panel_title {
            position: relative;
            width: 100%;
            height: 32px;
            background: url('~@/assets/image/title_bg.png') no-repeat;
            .title_text {
              display: inline-block;
              width: 100%;
              height: 32px;
            }
            .panel_tab{
              position: absolute;
              right: 15px;
              top: 0px;
              line-height: 32px;
              // display: flex;
              // justify-content: space-around;
              .hasLine::after{
                display: inline-block;
                content: '';
                width: 1px;
                background-color:  rgba(255, 255, 255, 0.7);
                height: 14px;
                margin-left: 18px;
              }
              .line{
                display: inline-block;
                width: 1px;
                background-color:  rgba(255, 255, 255, 0.7);
                height: 14px;
                margin-left: 18px;
              }
              .tab_item{
                display: inline-block;
                font-family: 'Source Han Sans CN';
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 21px;
                color: rgba(255, 255, 255, 0.7);
                // width: 28px;
                margin-left: 18px;
                cursor: pointer;
              }
              .active{
                color: #0DADF1;
              }
            }
          }
        }
  </style>